@extends('layouts.base')

@section('title', '分配角色')

@section('admin-style')
	<link rel="stylesheet" type="text/css" href="{{ asset('/assets/element-ui/lib/theme-chalk/index.css') }}">
    <!-- import Vue before Element -->
    <script src="{{ asset('assets\vue\vue.js')}}"></script>
    <!-- import JavaScript -->
    <scriipt src="{{ asset('/assets/element-ui/lib/index.js') }}"></scriipt>
    <scriipt src="{{ asset('/assets/element-ui/lib/axios.min.js') }}"></scriipt>
@stop

@section('content')
<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->
	<div class="row page-titles">
	    <div class="col-md-5 align-self-center">
	        <h3 class="text-themecolor">角色--分配</h3>
	    </div>
	    <div class="col-md-7 align-self-center">
	        <ol class="breadcrumb">
	            <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
	            <li class="breadcrumb-item">运维管理</li>
	            <li class="breadcrumb-item active">分配角色</li>
	        </ol>
	    </div>
	</div>
	<div class="row">
	    <div class="col-lg-12">
	        <div class="card">
            	<div class="card-header bg-success">
                    <h4 class="m-b-0 text-white">分配角色</h4>
                </div>
                <div class="card-body"></div>
                <div class="card-body">
                    <form class="needs-validation" method="post" action="{{ route('admin.operators.setRoleStore') }}" novalidate enctype="multipart/form-data">  
                        @csrf
                    	<div class="form-body">
                            <div class="form-group row">
                                <label class="control-label text-right col-md-2" for="">角色名称：</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="" name="name" placeholder="用户名" value="{{ old('name', $operator->name) }}" disabled>
                                    <input type="hidden" name="operator_id" value="{{ $operator->id }}">
                                    <input type="hidden" name="roles" v-model="value" value="">
                                </div>                                
                            </div>                              
                            <div class="form-group row">
                                <label class="control-label text-right col-md-2" for="">权限：</label>
                                <div class="col-md-7">
                                    <el-transfer
                                    v-model="value"
                                    :props="{
                                      key: 'id',
                                      label: 'name'
                                    }"
                                    :titles="['角色列表', '拥有角色列表']"
                                    :data="data">
                                    </el-transfer>
                                </div>
                            </div>
                        </div>
                      	<div class="form-actions">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="offset-sm-3 col-md-9">
                                            <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> 提交</button>
                                            <a href="{{ route('admin.operators.index') }}"><button type="button" class="btn btn-danger"><i class=" fas fa-times"></i> 取消</button></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
	    </div>
	</div>
</div>
@stop

@section('admin-js')
<script type="text/javascript">
    Vue.prototype.$axios = axios;
    Vue.prototype.$dcopy = function($arr){
        return JSON.parse(JSON.stringify($arr));
    }
</script>

<script>

    new Vue({
        el:'#app',
        data: ()=>{
          return {
            data: [],
            value:[]
          }

        },
        mounted: function(){
            this.init();
        },
        created: function(){

        },
        methods: {
            init: function(){
                var that = this;
                axios.get("{{ route('admin.operators.getRoles') }}", {
                    params:{
                        operator_id: "{{ $operator->id }}"
                    }
                }).then(res =>{
                    let data = res.data.data;
                    that.data = data.roles;
                    that.value = data.operator_roles;
                });
            }
        }
    });
</script>
@stop